<template>
  <div id='market_gameticket_grant_create'>
    <Row type='flex' justify="center" class='Row_content'>
      <Col>
        <Form ref="formInline" :model="formInline" :rules="ruleInline" :label-width="115">
          <FormItem prop="theme" label='主题：'>
            <Input type="text" v-model="formInline.theme" placeholder="请输入" style='width:280px' :maxlength="15"></Input>
          </FormItem>
          <FormItem prop="gameType" label='游戏券类型：'>
            <Select v-model="formInline.gameType" style="width:280px">
              <Option v-for="item in gameList" :value="item.value" :key="item.value">{{ item.label }}</Option>
            </Select>
          </FormItem>
          <FormItem prop="itemName" label='名称：'>
            <Input type="text" v-model="formInline.itemName" placeholder="请输入" style='width:280px'></Input>
          </FormItem>
          <FormItem prop="select" label='圈定人群：'>
            <Select v-model="formInline.select" style="width:280px">
              <Option v-for="item in selectedList" :value="item.value" :key="item.value">{{ item.label }}</Option>
            </Select>
          </FormItem>
          <FormItem prop="grant" label='每人发放数量：'>
            <Row type='flex'>
              <Col>
                <Input type="text" v-model="formInline.grant" placeholder="请输入" style='width:280px' :maxlength="4" @on-keyup='filterSpace'></Input>
              </Col>
              <Col style='margin-left:10px'><span>份</span></Col>
            </Row>
          </FormItem>
          <FormItem class="form-btn">
              <Button type="primary" class="system-submit-btn" @click="handleSubmit('formInline')">确定</Button>
              <Button class="system-submit-btn">取消</Button>
          </FormItem>
        </Form>
      </Col>
    </Row>
  </div>
</template>

<script>
export default {
  name: 'market_gameticket_grant_create',
  data () {
    return {
      formInline: {
        theme: '',
        gameType: '',
        itemName: '',
        select: '',
        grant: ''
      },
      ruleInline: {
        theme: { required: true, message: '请填写主题', trigger: 'blur' },
        gameType: { required: true, message: '请选择游戏券类型', trigger: 'blur' },
        itemName: { required: true, message: '请选择名称', trigger: 'blur' },
        select: { required: true, message: '请选择圈定人群', trigger: 'blur' },
        grant: { required: true, message: '请输入每人发放数量', trigger: 'blur' }
      },
      gameList: [
        {
          value: '1',
          label: '次卡'
        },
        {
          value: '2',
          label: '券包'
        }
      ],
      selectedList: [
        {
          value: '0',
          label: '全部'
        },
        {
          value: '1',
          label: 'V0-V9'
        }
      ]
    }
  },
  methods: {
    filterSpace (e) {
      e.target.value = e.target.value.replace(/\D/g, '')
      if (e.target.value !== '' && e.target.value.substring(0, 1) === '0') {
        e.target.value = e.target.value.substring(1, e.target.value.length)
      }
    },
    handleSubmit (name) {
    }
  }
}
</script>

<style lang='less'>
#market_gameticket_grant_create{
  .ivu-row-flex {
    flex-wrap: nowrap;
  }
}
</style>
